<template>
  <div>
      <Title/>
      <div style="width:1152px;margin:0 auto;margin-top:24px">
        <el-card style="color:#555555">
          地址详情
        </el-card>
        <el-card style="margin-top:24px">
          <div style="text-align:left;color:#555555;padding-left:8px">{{address}}</div>
          <el-table
            :data="balance_info"
            :show-header="false"
            style="width: 100%;margin-top:8px">
            <el-table-column
              prop="name"
              label="区块号"
              width="160">
            </el-table-column>
            <el-table-column
              prop="value"
              label="区块号"
              width=auto>
              <template slot-scope="scope">
                <div v-html='scope.row.value'></div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card style="margin-top:24px">
          <div style="color:#555555">交易历史</div>
          <el-table
            :data="transactionData"
            style="width: 100%">
            <el-table-column
              label="交易hash"
              width="180">
              <template slot-scope="scope">
                <router-link :to = '"/exterinsics/"+scope.row.tx_hash' class="AddressLabel">{{scope.row.tx_hash}}</router-link>
              </template>
            </el-table-column>
            <el-table-column
              label="区块hash"
              width="180">
              <template slot-scope="scope">
                <router-link :to = '"/blocks/"+scope.row.block_hash' class="AddressLabel">{{scope.row.block_hash}}</router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="时间">
            </el-table-column>
            <el-table-column
              label="发送者">
              <template slot-scope="scope">
                <router-link :to = '"/address/"+scope.row.from' class="AddressLabel">{{scope.row.from}}</router-link>
              </template>
            </el-table-column>
            <el-table-column
              label="接收者">
              <template slot-scope="scope">
                <router-link :to = '"/address/"+scope.row.to' class="AddressLabel">{{scope.row.to}}</router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="result"
              label="结果">
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top:8px"
            background
            layout="prev, pager, next"
            :total="transactionPageCount"
            @current-change="OnTransactionPageChange">
          </el-pagination>
        </el-card>
      </div>
  </div>
</template>

<script>
/* eslint-disable */

import axios from 'axios'
import qs from 'qs'
import Title from "./title.vue"
export default {
  name: 'Address',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      address: '',
      balance_info:[{
        name: "总资产",
        value: ""
      },
      {
        name: "可用资产",
        value: ""
      },{
        name:"质押资产",
        value: ""
      },{
        name: "nonce",
        value: ""
      }],
      transactionData:[/*{
        "tx_hash": "aaa",
        "block_hash": "",
        "time": "",
        "from": "",
        "to": "",
        "amount": "",
        "result": ""
      }*/],
      transactionPageCount:0,
      transactionPageIndex:1
    }
  },
  components:{
    Title
  }, mounted: function () {
    this.address = this.$route.params.address
    this.FlushBalance()
    this.FlushTransaction()
  }, destroyed: function () {
  },
  methods: {
    getYMDHMS (timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2, '0')
      const date = (time.getDate()).toString().padStart(2, '0')
      const hours = (time.getHours()).toString().padStart(2, '0')
      const minute = (time.getMinutes()).toString().padStart(2, '0')
      const second = (time.getSeconds()).toString().padStart(2, '0')

      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
    },
    FlushBalance(){
      var self = this
      axios.get('/api/get_address_info/'+this.address).then(function(data){
        var object = data.data
        self.balance_info[0].value = (object["free"]/10000000000).toFixed(4)
        self.balance_info[1].value = ((object["free"] - object["feeFrozen"])/10000000000).toFixed(4)
        self.balance_info[2].value = (object["feeFrozen"]/10000000000).toFixed(4)
        self.balance_info[3].value = object["nonce"]
      })
    },
    FlushTransaction(){
      var self = this
      axios.get('/api/get_transaction_by_address/'+this.address+"/20/"+this.transactionPageIndex).then(function(data){
        var object = data.data
        console.log(object)
        self.transactionPageCount = object["count"]
        object["data"].forEach(item => {
          item.amount = (item.amount/10000000000).toFixed(4)
          item.result = item.result == 0?"失败":"成功"
          item.time = self.getYMDHMS(item.time)
        });
        self.transactionData = object["data"]
      })
    },
    OnTransactionPageChange(val){
      this.transactionPageIndex = val
      this.FlushTransaction()
    }
  }
}
</script>
<style lang="scss">
@import "../style/self.scss"; 
.AddressLabel{
  color:#21a3fb;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>